<template>
    <div class="root">
        <el-header>指令列表</el-header>
        <el-main>
            <div class="seacher">
                <el-input v-model="cmdSearchTxt" placeholder="请输入指令信息，支持模糊查询" :suffix-icon="Search" clearable>
                </el-input>
            </div>
            <el-scrollbar v-if="treeData && treeData.length">
                <el-tree ref="tree" :data="treeData" :props="defaultProps" node-key="id" :highlight-current="true"
                    :default-expand-all="true" :expand-on-click-node="false" :filter-node-method="filterNode"
                    @node-click="handleNodeClick">
                    <template v-slot="{ node, data }">
                        <span class="custom-tree-node" @mouseenter="haldleMouseEnter(data)"
                            @mouseleave="handleMouseLeave()">
                            <span class="part_left">
                                <span class="cus-icon2">
                                    <span v-html="cmdIcon"></span>
                                </span>
                                <span v-if="data.description">
                                    <el-tooltip placement="right" :content="data.description">
                                        <span>{{ node.label }}</span>
                                    </el-tooltip>
                                </span>
                                <span v-else>
                                    {{ node.label }}</span>
                            </span>
                            <span class="cus-icon">
                                <el-tooltip placement="right" content="执行指令">
                                    <span v-html="arrowRight" @click.stop="exeDirective(data)"></span>
                                </el-tooltip>
                            </span>
                        </span>
                    </template>
                </el-tree>
            </el-scrollbar>
            <div v-else class="null-box">暂无数据</div>
        </el-main>
    </div>
</template>
<script setup lang="ts">
defineOptions({
    name: "DirectiveList"
})
import { ref, onMounted, nextTick, watch } from 'vue';
import { sendCommand } from "../..//api/manualTest/index"
import type { FilterNodeMethodFunction, TreeInstance } from 'element-plus'
import { Search, Promotion, CaretRight } from '@element-plus/icons-vue';
import { useDeviceViewStore } from "../../store/deviceView";

import cmdIcon from '../../assets/svg/command.svg?raw';
import arrowRight from "../../assets/svg/arrow-right.svg?raw";

const deviceViewStore = useDeviceViewStore();
const treeData = ref([]) as any;
const defaultProps = ref({
    children: "children",
    // label: "Description",
    label: "name",
});
const tree = ref<TreeInstance>();
const cmdSearchTxt = ref("");
const isAlreadyClick = ref(false);
const tempTreeNodeId = ref("");

const emit = defineEmits(["getDirectiveConfig", "exeCmd"]);

watch(
    () => deviceViewStore.currentDevice?.id,
    () => {
        getCommandsByDeviceName();
    }
);

watch(() => deviceViewStore.clickedDevice.length,
    (val) => {
        if (val === 0) {
            clearSelfData();
        }
    });


const handleNodeClick = (data: any) => {
    tempTreeNodeId.value = data.id;
    emit("getDirectiveConfig", data.id);
    if (isAlreadyClick.value) return;
    // this.$emit("loadHistorylog");
    isAlreadyClick.value = true;
}
const treeNodeId = ref("");
onMounted(async () => {

    getCommandsByDeviceName();
})
const getCommandsByDeviceName = async () => {
    if (!deviceViewStore.currentDevice?.id) return;
    const testResult = await sendCommand({ deviceId: deviceViewStore.currentDevice.id }, { commandName: "GetCommandByDeviceName" });

    const { data }: { data: any } = testResult;
    if (data && data.length) {
        treeData.value = data;
        deviceViewStore.storeCommandList(data);
        for (let i = 0; i < 2; i++) {
            const methodName = data[i]?.methodName;
            if (methodName) {
                deviceViewStore.setOpenCloseMethodName(methodName);
            }
        }

        nextTick(() => {
            (tree.value as any).setCurrentKey(treeData.value[0].id); // 默认选中节点第一个
            const node = (tree.value as any).getNode(treeData.value[0].id);
            if (node) {
                // 手动触发点击事件
                handleNodeClick(node.data);
            }
        });
    }
}
const haldleMouseEnter = (data: any) => {
    treeNodeId.value = data.$treeNodeId;
}
const handleMouseLeave = () => {
    treeNodeId.value = "";
}
const exeDirective = (data: any) => {

    if (tempTreeNodeId.value !== data.id) {
        emit("getDirectiveConfig", data.id);
    } else {
        emit("getDirectiveConfig", data.id);
        emit("exeCmd");
    }
}

watch(cmdSearchTxt, (val) => {
    tree.value!.filter(val);
})

const filterNode: FilterNodeMethodFunction = (value: string, data: any) => {
    if (!value) return true
    return data.name.includes(value.trim());
}
const clearSelfData = () => {
    treeData.value = [];
}

</script>
<style lang="scss" scoped>
.root {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;

    .el-header {
        height: 30px !important;
        line-height: 30px;
        background-color: #dddddd;
        font-size: 12px;
        color: #666666;
        font-weight: 500;
        padding-left: 12px;
    }

    .el-main {
        flex: 1;
        display: flex;
        margin-top: 3px;
        flex-direction: column;
        overflow: hidden;
        background-color: #f3f3f3;
        border-bottom: 10px solid #e4e7ed;
        box-sizing: border-box;
        padding: 0 !important;
        margin-bottom: 3px;

        .null-box {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #909399;
            font-size: 12px;
        }

        // padding: 12px 0;
        box-sizing: border-box;

        :deep(.seacher) {

            .el-input__wrapper {
                background-color: #f3f3f3;
                border: 1px solid #e4e7ed;
                box-sizing: border-box;
            }

            margin: 4px 2px;

            .el-input__inner {
                height: 30px !important;
                line-height: 30px !important;
                background-color: #f3f3f3 !important;
                color: #666666 !important;
            }

            :deep(.el-input__inner::placeholder) {
                color: #909399 !important;
                font-size: 12px !important;
            }

            :deep(p.el-input__icon) {
                line-height: 30px !important;
            }
        }

        .el-tree {
            flex: 1;
            background-color: #f3f3f3;
            padding: 0 12px;
            box-sizing: border-box;

            &::-webkit-scrollbar {
                height: 6px;
                width: 6px;
            }

            &::-webkit-scrollbar-track {
                display: none;
            }

            &::-webkit-scrollbar-thumb {
                background-color: rgba(144, 147, 153, 0.4);
            }

            // &-node__content:hover {
            //   background-color: $--color-test-hover;
            // }
            // &-node:focus > .el-tree-node__content {
            //   background-color: $--color-test-hover;
            // }
            &-node__label {
                font-weight: 500;
                font-size: 12px;
                color: #666666;
            }

            &-node__content {
                line-height: 26px;
                height: 26px;
            }

            .custom-tree-node {
                flex: 1;
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-right: 6px;
                font-size: 16px;

                .part_left {
                    display: flex;
                    justify-content: space-between;

                    .cus-icon2 {
                        display: flex;
                        justify-content: center;
                        margin-right: 10px;

                        span {
                            width: 15px !important;
                            height: 15px !important;
                            fill: black;
                        }

                        span :deep(svg) {
                            width: 16px !important;
                            height: 16px !important;
                        }

                        span :deep(svg *),
                        span :deep(svg) {
                            width: 16px !important;
                            height: 16px !important;
                        }

                    }
                }

                .cus-icon {
                    display: flex;
                    justify-content: center;

                    span {
                        margin-left: 10px;
                        width: 15px !important;
                        height: 15px !important;
                        fill: lightgreen;
                        display: inline-block;
                    }
                }
            }
        }
    }
}

/* 鼠标悬停颜色 */
:deep(.el-tree-node:hover .el-tree-node__content) {
    background-color: #f5f7fa !important;
    color: #409eff !important;
}

/* 选中节点颜色 */
:deep(.el-tree-node.is-current > .el-tree-node__content) {
    background-color: #e6f7ff !important;
    color: blue !important;
}
</style>